<template>
  <div class="app-container">
    <el-row>
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 10}" :lg="{span: 10}" :xl="{span: 10}" class="m-b-20 p-r-10">
        <el-card class="m-l-5">
          <el-button-group class="m-b-20">
            <el-input v-model="filterRuleText" class="m-b-5" placeholder="搜索规则" />
            <el-button v-permission="['spider:define:add']" size="mini" plan type="primary" icon="el-icon-plus" @click="handleForm">添加规则</el-button>
            <el-button v-permission="['spider:define:delete']" size="mini" plan type="danger" icon="el-icon-delete" @click="handleDel">删除</el-button>
          </el-button-group>

          <el-tree
            ref="dictTree"
            node-key="id"
            :data="treeData"
            :props="treeProps"
            :filter-node-method="filterNode"
            class="filter-tree"
            show-checkbox
            highlight-current
            check-on-click-node
            :default-expanded-keys="['0']"
            @node-click="selectDict"
          >
            <span slot-scope="{ data }" class="custom-tree-node w-100">
              <span>{{ getDictLabel(data.name) }}</span>
              <span v-permission="['spider:define:add']" v-if="data.id!=='0'" class="fr">
                <el-link style="font-size:small;" type="success" @click.stop="handleForm(data.id)">添加选项</el-link>
              </span>
            </span>
          </el-tree>
        </el-card>
      </el-col>

      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 14}" :lg="{span: 14}" :xl="{span: 14}" class="m-b-20">
        <el-card style="margin:0 0 5px 5px">
          <el-form ref="dictForm" :model="form" label-width="120px" class="filter-form">
            <el-form-item hidden>
              <el-input v-model="form.dictCode" hidden />
            </el-form-item>
            <el-form-item prop="parentCode" hidden>
              <el-input v-model="form.parentCode" hidden />
            </el-form-item>
            <el-form-item prop="ancestors" hidden>
              <el-input v-model="form.ancestors" hidden />
            </el-form-item>
            <el-form-item prop="isLeaf" hidden>
              <el-input v-model="form.isLeaf" hidden />
            </el-form-item>
            <el-form-item label="字典组" prop="dictGroup">
              <el-input v-model="form.dictGroup" placeholder="爬取地址" :readonly="form.dictType!=='00'" />
            </el-form-item>
            <el-form-item label="字典标签" prop="dictLabel" :hidden="form.dictType==='00'">
              <el-select v-model="form.dictLabel">
                <el-option label="标题规则" value="grep_title_define" />
                <el-option label="缩略图规则" value="grep_image_define" />
                <el-option label="下载路径规则" value="grep_download_define" />
                <el-option label="大文本规则" value="grep_content_define" />
              </el-select>
            </el-form-item>
            <el-form-item label="字典键值" prop="dictValue">
              <el-input v-model="form.dictValue" />
            </el-form-item>
            <el-form-item label="排序" prop="dictSort">
              <el-input-number v-model="form.dictSort" :min="1" />
            </el-form-item>
            <el-form-item label="字典类型" prop="dictType">
              <el-select v-model="form.dictType">
                <el-option label="组" value="00" />
                <el-option label="选项" value="01" />
              </el-select>
            </el-form-item>
            <el-row type="flex" justify="center">
              <el-button v-permission="['spider:define:edit']" type="primary" icon="el-icon-check" @click="handleSave">保 存</el-button>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { grepTreeData, crawDefineLoad, crawDefineSave, crawDefineDelete } from '@/api/tool/craw'

export default {
  data() {
    return {
      filterRuleText: '',
      treeData: [],
      treeProps: {
        children: 'children',
        label: 'name'
      },
      form: {
        dictCode: undefined,
        parentCode: undefined,
        ancestors: undefined,
        isLeaf: undefined,
        dictGroup: undefined,
        dictLabel: undefined,
        dictValue: undefined,
        dictSort: 1,
        dictType: '00'
      },
      dictLabel: {
        grep_title_define: '标题规则',
        grep_image_define: '缩略图规则',
        grep_download_define: '下载路径规则',
        grep_content_define: '大文本规则'
      }
    }
  },
  watch: {
    filterRuleText(val) {
      this.$refs.dictTree.filter(val)
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 加载下拉菜单
      this.getTreeData()
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getTreeData() {
      grepTreeData({ from: 'vue' }).then(response => {
        this.treeData = response
      }).catch(e => {})
    },
    getDictLabel(value) {
      return this.dictLabel[value] ? this.dictLabel[value] : value
    },
    selectDict(data, node) {
      this.onCancel()
      this.form.dictCode = data.id
      crawDefineLoad({ 'id': data.id }).then(response => {
        this.form = this.$api.objectUpdate(this.form, response.param)
        this.changeDictType()
      }).catch(() => {})
    },
    changeDictType() {
      if (this.form.dictType === '00') {
        this.form.isLeaf = 'N'
      } else {
        this.form.isLeaf = 'Y'
      }
    },
    handleForm(parentId) {
      this.onCancel()
      parentId = parentId | '0'
      this.form.parentCode = parentId
      crawDefineLoad({ 'pid': parentId }).then(response => {
        this.form = this.$api.objectUpdate(this.form, response.param)
        this.changeDictType()
      }).catch(() => {})
    },
    handleSave() {
      if (this.form.dictType === '00') {
        this.form.dictLabel = this.form.dictValue
      }
      crawDefineSave(this.form).then(response => {
        this.$modal.msgSuccess(response.msg)
        this.getTreeData()
      }).catch(() => {})
    },
    handleDel() {
      const code = this.$refs.dictTree.getCheckedNodes()
      if (!code) {
        this.$modal.msgWarning('请选择要删除的内容')
        return
      }

      this.$confirm('是否删除所选内容?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        crawDefineDelete({ ids: this.form.dictCode }).then(response => {
          this.$modal.msgSuccess(response.msg)
          this.getTreeData()
        }).catch(e => {})
      }).catch(e => {})
    },
    onCancel() {
      this.$refs.dictForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-tree {
  overflow-y: auto;
}
.filter-form {
  overflow-y: auto;
  margin: 0 0 10px 15px;
}

.app-container {
  .filter-tree {
    height: calc(100vh - 305px);
  }
  .filter-form {
    height: calc(100vh - 225px);
  }
}

.fixed-header+.app-main {
  .app-container {
    .filter-tree {
      height: calc(100vh - 305px);
    }
    .filter-form {
      height: calc(100vh - 225px);
    }
  }
}

.hasTagsView {
  .app-main {
    .app-container {
      .filter-tree {
        height: calc(100vh - 340px);
      }
      .filter-form {
        height: calc(100vh - 265px);
      }
    }
  }
}

.hasTagsView {
  .fixed-header+.app-main {
    .app-container {
      .filter-tree {
        height: calc(100vh - 340px);
      }
      .filter-form {
        height: calc(100vh - 265px);
      }
    }
  }
}
</style>
